<template>
  <!-- 一级、二级、三级分类的下拉选择组件 -->
  <div class="select-box">
    <div class="first-select select-options">
        <span class="select-options-title">一级分类</span>
        <el-select v-model="select1Value" placeholder="请选择" size="large" @focus="category1_focus" @change="category1_change">
            <el-option v-for="item,index in category1Arr" :key="index" :value="item.name"></el-option>
        </el-select>
    </div>
    <div class="second-select select-options">
        <span class="select-options-title">二级分类</span>
        <el-select v-model="select2Value" placeholder="请选择" size="large" @focus="category2_focus" @change="category2_change">
            <el-option v-for="item,index in category2Arr" :key="index" :value="item.name"></el-option>
        </el-select>
    </div>
    <div class="three-select select-options">
        <span class="select-options-title">三级分类</span>
        <el-select v-model="select3Value" placeholder="请选择" size="large" @focus="category3_focus" @change="category3_change">
            <el-option v-for="item,index in category3Arr" :key="index" :value="item.name"></el-option>
        </el-select>
    </div>
 </div>
</template>

<script setup lang="ts">
import { ElButton, ElCard, ElSelect, ElIcon, ElOption, ElTable, ElTableColumn } from "element-plus";
import { ArrowDown } from '@element-plus/icons-vue';
//引入请求函数
//@ts-ignore  类型约束
import { responseProductCategoryData } from "@/api/product/type.js";
//@ts-ignore
import { reqProductCategory1, reqProductCategory2, reqProductCategory3, } from "@/api/product/index.ts";
import { ref, defineEmits } from "vue";

//注册自定义事件
const emit = defineEmits(['sendCategoryIds','sendClearCategoryIds']);

//一级、二级、三级下拉选中的value
let select1Value = ref();
let select2Value = ref();
let select3Value = ref();
//商品一级、二级、三级分类的数据
let category1Arr = ref([]);
let category2Arr = ref([]);
let category3Arr = ref([]);

//一级二级三级下拉框的focus事件
const category1_focus = async () => {
  let res:responseProductCategoryData = await reqProductCategory1();
  if(res.code === 200){
    category1Arr.value = res.data;
    // console.log("商品一级分类api请求成功",res);  
  }
}
const category2_focus = async () => {
  if(select1Value.value == undefined || select1Value.value == "") return;
  let category1Id = filterIdByName(category1Arr.value,select1Value.value).id;
  let res:responseProductCategoryData = await reqProductCategory2(category1Id);
  if(res.code === 200){
    category2Arr.value = res.data;
    // console.log("商品二级分类api请求成功",res);  
  }
}
const category3_focus = async () => {
  if((select1Value.value == undefined || select1Value.value == "") || (select2Value.value == undefined || select2Value.value == "")) return;
  let category2Id = filterIdByName(category2Arr.value,select2Value.value).id;
  let res:responseProductCategoryData = await reqProductCategory3(category2Id);
  if(res.code === 200){
    category3Arr.value = res.data;
    // console.log("商品三级分类api请求成功",res); 
  }
}
//一级、二级、三级下拉框的change事件
const category1_change = () => {
  select2Value.value = "";
  select3Value.value = "";
  setIdsChange();  //执行自定义事件
}
const category2_change = () => {
  select3Value.value = "";
  setIdsChange();  //执行自定义事件
}
const category3_change = () => {
    sendDate();  //执行自定义事件
}

//触发自定义事件传值(ids)给父组件
const sendDate = () => {
    let category1Id = filterIdByName(category1Arr.value,select1Value.value).id;
    let category2Id = filterIdByName(category2Arr.value,select2Value.value).id;
    let category3Id = filterIdByName(category3Arr.value,select3Value.value).id;
    emit('sendCategoryIds',{category1Id,category2Id,category3Id});
}
//自定义事件，通知父组件，一二级id改变了
const setIdsChange = () => {
  emit('sendClearCategoryIds');
}

//功能函数，返回分类名称对应的item项
function filterIdByName(arr:any,name:string):any{
  let obj = null;
  arr.forEach(item => {
    if(item.name === name){
      obj = item;
      return;
    }
  })
  return obj;
}
</script>
<script lang="ts">
export default {
    name:"Category"
}
</script>

<style lang="scss">
.select-box{
    width: 100%;
    height: 15vh;
    margin-bottom: 20px;
    box-shadow: 3px 3px 10px #6e726e ;
    display: flex;
    align-items: center;
    
    .select-options{
      margin:0 30px;
      
      .select-options-title{
        display: inline-block;
        margin-right:20px;
      }
    }
}
</style>